<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style/aa.css">
    
    <script src="./js/font.min.js"></script>
    <script src="./js/zepto.min.js"></script>
    <script src="./js/touch.js"></script>
    <script src="./js/fx.js"></script>
    <script src="./js/iscroll.js"></script>
    <script src="./js/echo.min.js"></script>
    <script src='./js/fastclick.js'></script>
</head>

<body>
    <div class="box">
        <header>
            <span><a href="" class="return" id="return"><img src="./imgs/sear.png"></a></span>

            <span> <a href="" class="cc">都是他舅</a></span>
            <span><a href="" class="fav" id="fav"><img src="./imgs/scc.png"></a></span>
            
        </header>
        <section>
            <div id="home" class="home">
                <ul class="cui">
                    <a href="#list" title="孕前准备" id="yunqian">
                        <img src="./imgs/blank.gif" alt="" data-echo="./imgs/1.jpg">
                    </a>
                    <a href="#list" title="孕前准备" id="yunzhong">
                        <img src="./imgs/blank.gif" alt="" data-echo="./imgs/2.jpg">
                    </a>
                    <a href="#list" title="孕前准备" id="chanhou">
                        <img src="./imgs/blank.gif" alt="" data-echo="./imgs/3.jpg">
                    </a>
                    <a href="#list" title="孕前准备" id="yunqian">
                        <img src="./imgs/blank.gif" alt="" data-echo="./imgs/4.jpg">
                    </a>
                    <a href="#list" title="孕前准备" id="yunqian">
                        <img src="./imgs/blank.gif" alt="" data-echo="./imgs/5.jpg">
                    </a>
                    <a href="#list" title="孕前准备" id="yunqian">
                        <img src="./imgs/blank.gif" alt="" data-echo="./imgs/7.jpg">
                    </a>
                    <a href="#list" title="孕前准备" id="yunqian">
                        <img src="./imgs/blank.gif" alt="" data-echo="./imgs/8.jpg">
                    </a>
                    <a href="#list" title="孕前准备" id="yunqian">
                        <img src="./imgs/blank.gif" alt="" data-echo="./imgs/9.jpg">
                    </a>
                    <a href="#list" title="孕前准备" id="yunqian">
                        <img src="./imgs/blank.gif" alt="" data-echo="./imgs/10.jpg">
                    </a>
                    <a href="#list" title="孕前准备" id="yunqian">
                        <img src="./imgs/blank.gif" alt="" data-echo="./imgs/11.jpg">
                    </a>
                </ul>
            </div>
            <div id="shou" class="shou">
                收藏
            </div>
            <div id="lishi" class="lishi">
                历史
            </div>
            <div id="geng" class="geng">
                更多
            </div>
            <div id="list" class="list">
                <div class="list-concat" id="list-concat">

                </div>
            </div>
            <div id='article' class="article">
                <div class="ice"></div>
            </div>


        </section>
        <footer>
            <a href="#home">
                首页 <br> home
            </a>
            <a href="#shou">
                收藏 <br> shou
            </a>
            <a href="#lishi">
                历史 <br> histy
            </a>
            <a href="#geng">
                更多 <br> geng
            </a>
            <mark>
            </mark>
        </footer>
    </div>
</body>
<script>

    new IScroll(".home", {
        click: true
    });


    FastClick.attach(document.body)

    echo.init({
        offset: 0,
        throttle: 3000,
    });
    var arr = ["yunqian", "yunzhong", "chanqian"]
    var Datas = null;

    $.ajax({
        url: "data/data.json",
        dataType: "json",
        type: "get",
        success: function (data) {
            Datas = data;
        }
    })
     // 收藏
    var ls = localStorage;

    if (!ls.getItem("fav")) {
        ls.setItem("fav", '[]')
    }
    $(".fav").click(function () {
        var tagTitle = $(this).attr("title");
        var arrFav = JSON.parse(ls.getItem("fav"));

       
        if ($.inArray(tagTitle, arrFav) > -1) {
            alert('已经收藏过了')
        } else {
            //添加
            addFav(tagTitle)
        }

    })

    function addFav(tagTitle) {

        var brrFav = JSON.parse(ls.getItem("fav"));
        // console.log(brrFav)
        brrFav.push(tagTitle)


        ls.setItem('fav', JSON.stringify(brrFav))

    }

    $.each(JSON.parse(ls.fav),function(index,val){
        console.log(JSON.parse(ls.fav)[index])
         $(".shou").html(JSON.parse(ls.fav)[index])
    })

    $('.box').on("click", "a", function (e) {

        e.preventDefault();
        var HH = $(this).attr('href');
        var id = $(this).attr('id');
        $(HH).css({
            "transition": "all .2s",
            left: 0
        }).siblings().css({
            left: "100%"
        })

        if (e.target.parentNode.nodeName == "FOOTER") {
            // 尾部动画 
            var index = $(this).index();
            $('mark').animate({
                left: index * 25 + "%"
            })
        }
        if (HH == "#list") {
            getId(id)
        }

        inTo($(this))


        if (HH == "#list") {
            getId(id);
        } else if (HH == '#article') {
            getContent($(this));
        }
    })


    function getContent(el) {
        var arr = el.data("content").split("_");
        $(".ice").html(
            Datas[arr[0]]['fenlei'][arr[1]].content
        )
        $('.cc').text(Datas[arr[0]]['fenlei'][arr[1]].title)

    }

    // 判断内容是否与 数据相匹配
    function getId(id) {
        if ($.inArray(id, arr) > -1) {
            getLoad(id)
        }
    }
    // 渲染 数据
    function getLoad(id) {
        // console.log(Datas[id]['fenlei'])
        var str = "";
        $.each(Datas[id]['fenlei'], function (index, val) {
            str += '<a href="#article" data-content="' + id + '_' + index + '"><img src="./imgs/' + val.img + ' " ><p>' + val.title + '</p></a>'
        })
        $("#list-concat").html(str);
        new IScroll(".list");

    }
    

    function inTo(that) {
        var href = that.attr("href");
        if (href == '#list') {
            $(".return").attr("href", '#home');
            $(".return").show();
            $(".cc").text("都是他舅")
            $(".fav").hide();
        } else if (href == '#home') {
            $(".return").hide();
        } else if (href == '#article') {
            $(".fav").attr("title",that.find('p').text())
            $(".fav").show();
            $(".return").attr('href', '#list');
        }
    }
</script>

</html>